{% extends 'core/clean.html' %}
{% load hash_filters %}
{% load comp_filters %}

{% block title %} zoyoe sydneyscent {% endblock %}

{% block css_link %} 
  <link rel="stylesheet" href="/css/contrib/960.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/contrib/general.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/contrib/nav.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/contrib/dialog.css" type="text/css" media="all" charset="utf-8"/>

<style type="text/css">
h3{
  padding:0px;
  margin:15px 0px 5px 0px;
}
.mission{
 background: transparent url("/res/bg/target.png") center 9px no-repeat;
}

.servicecard{
 background: transparent url("/res/bg/text.png") center 7px no-repeat;
}

.startusing{
 background: transparent url("/res/bg/play.png") center 7px no-repeat;
}

.collection{
 background: transparent url("/res/bg/collection.png") center 7px no-repeat;
}

.support{
 background: transparent url("/res/bg/support.png") center 7px no-repeat;
}
.approach{
 width:300px;
 height:110px;
 margin:0px 30px 0px 30px;
 border:1px solid #EAEAEA;
}
#steps div.step label{
 padding:5px 0px 0px 20px;
 display:block;
 float:left;
 margin:0px 0px 10px 0px;
 font-size:26px;
 font-weight:bold;
 position:relative;
 left:-10px;
 font-family: arial,sans-serif;
 color:#6682b5;
}
#steps div.step label span{
 font-size:16px;
 margin-left:0px;
 font-weight:normal;
}
#steps div.step p{
  margin:8px 0 17px 0;
}
#steps div.step{
 font-size:12px;
 padding:10px 5px 10px 20px;
 margin:0px 0px 20px 0px;
 border-bottom:1px solid #AAA;
 border-top:1px solid #EAEAEA;
 border-left:1px solid #EAEAEA;
 border-right:1px solid #AAA;
}
#foot{
 margin-top:30px;
}
</style>


{% endblock %}

{% block js_link %}
 <script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
 </script>
 <script type="text/javascript" src="/js/comps.js"></script>
 <script type="text/javascript" src="/js/ui.js"></script>
 <script type="text/javascript" src="/js/zoyoe.js"></script>
 <script type="text/javascript" src="/js/ele.js"></script>
 <script type="text/javascript">
    function document_load(){
      YUI().use('node','anim','io-form',function(Y){
        zoyoe.InitZoyoe(false,Y);
        zoyoe.admin = InitAdmin(zoyoe);
      });
    }
  </script>

{% endblock %}

{% block nav %}
  <li class='menu'><a href='/zoyoe/'>Zoyoe</a></li>
  <li class='menu'><a href='/map/'>Distribution</a></li>
  <li class='menu'><a href='/forum/'>Forum</a></li>
  {% include "core/_usrmenu.html" %}
{% endblock %}

{% block content %}
 <div class='nav-sup' style="border-bottom:90px solid white;">
       <div class='photo-block'>
         <h1 style="font-weight:bolder;font-size:35px;font-family:Times New Roman, Times, serif;">
         tools for your local services online 
         </h1>
         <h2 style="font-size:15px;font-family:">
         zoyoe, integrating your local business with your online community
         </h2>
         <div class="buttons shadow">
           <div class="button startusing current">
             Start Using 
           </div>
           <a href="/zoyoe/mission/" class="button mission">
             About Zoyoe 
           </a>
           <div class="button servicecard">
             Our Programs
           </div>
           <a href="/glue/collection/myservices" class="button collection">
             My Services 
           </a>
           <div class="button support">
             Support & Forum
           </div>
         </div>
       </div>
 </div>
 <div class='container_12' id='steps'>
 <div class='step'>
  <label style="width:605px;">
  Manage your social accounts, 
  </br><span>integrating them with web applications to provide richer content for your web pages.
  </span>
  <iframe style="width:605px;height:350px;margin:10px 10px 10px 5px;float:left;" frameborder='0' src='/wiki/card.html'></iframe>
  </label>
  <h3 style='float:right;width:270px;'>
    Sign in with your social accounts: 
  </h3>
  <div style='float:right;width:270px;position:relative;'>
    <a class='fblogin'>
    </a>
    <a class='twitterlogin'>
    </a>
    <a class='linkedinlogin'>
    </a>
  </div>
  <h3 style='float:right;width:270px;'>
    Integrate your image hosting services:
  </h3>
  <ul style='float:right;width:270px;'>
    <a class='backend'>
      <img src="/res/icons/mediaicons/PNG/photobucket.png"></img>
      <span>photobucket</span>
    </a>
    <a class='backend'>
      <img src="/res/icons/mediaicons/PNG/facebook.png"></img>
      <span>facebook</span>
    </a>
    <a class='backend'>
      <img src="/res/icons/mediaicons/PNG/flickr.png"></img>
      <span>flickr</span>
    </a>
  </ul>
  <h3 style='float:right;width:270px;'>
    Integrate your video hosting services:
  </h3>
  <ul style='float:right;width:270px;'>
    <a class='backend'>
      <img src="/res/icons/mediaicons/PNG/youtube.png"></img>
      <span>youtube</span>
    </a>
  </ul>
  <h3 style='float:right;width:270px;'>
    Integrate your retailing services:
  </h3>
  <ul style='float:right;width:270px;'>
    <a class='backend'>
      <img src="/res/icons/mediaicons/PNG/ebay.png"></img>
      <span>ebay</span>
    </a>
  </ul>
  <br style="clear:both"/>
 </div>
{% endblock %}

{% block tail %}
 {% include "core/_tail.html" %}
{% endblock %}
